import React, { ReactElement, useEffect, useState } from "react";
import Layout from "./Layout";
import { useSelector } from "react-redux";
import { RootState } from "@/models";
import { Col, Row, Space } from "antd";
import CheckBox from "./CheckBox";
import RadioBox from "./RadioBox";
interface Props {}

export default function Shop(props: Props): ReactElement {
  // const state = useSelector((state: RootState) => state);
  // console.log(state);

  const [myFilters, setMyFilters] = useState<{
    category: string[];
    price: number[];
  }>({
    category: [],
    price: [],
  });

  useEffect(() => {
    console.log(myFilters);
  }, [myFilters]);
  const filterDom = () => {
    return (
      <Space size="middle" direction="vertical">
        <CheckBox
          handleFilter={(filters: string[]) => {
            setMyFilters({ ...myFilters, category: filters });
          }}
        />
        <RadioBox
          handleFilter={(filters: number[]) => {
            setMyFilters({ ...myFilters, price: filters });
          }}
        />
      </Space>
    );
  };
  return (
    <Layout title="拉勾商城" subTitle="挑选你喜欢的商品吧">
      <Row>
        <Col span="4">{filterDom()}</Col>
        <Col span="20">right</Col>
      </Row>
    </Layout>
  );
}
